<template>
	<!-- 
  首页
 -->
	<view class="centent">
		<!-- 加载页 -->
		<u-loading-page :loading="load"></u-loading-page>
		</u-navbar>
		<!-- 搜索框 -->
		<!-- <view class="search">
			<view class="search-son" @click="onSearch">
				<u-input placeholder="搜索作品" prefixIcon="search" shape="circle"
					prefixIconStyle="font-size: 22px;color: #909399"></u-input>
			</view>
		</view> -->
		<!-- 锚点 -->
		<view id="anchor"></view>
		<!-- 分割线 -->
		<view style="padding: 8rpx 40rpx">
			<u-line dashed></u-line>
		</view>

		<!-- tab标签 -->
		<view class="tabs">
			<text @click="onTabs(0)">预展中</text>
			<text @click="onTabs(1)">展览中</text>
			<text @click="onTabs(2)">已结束</text>
		</view>


		<!-- 展示列表 -->
		<view class="info-list">
			<view class="list" v-for="(item, index) in infoList" :key="index" @click="onParticulars(infoList[index])">
				<view v-if="item.auctionState == 0" class="card">
					<view>
						<image style="height:90rpx;width:100%;" src="../../../static/Group.png" mode="scaleToFill" />
					</view>
					<view class="text">
						待预展
					</view>
				</view>
				<view v-if="item.auctionState == 1" class="card">
					<view>
						<image style="height:90rpx;width:100%;" src="../../../static/Group1.png" mode="scaleToFill" />
					</view>
					<view class="text">
						预展中
					</view>
					<view class="text-time">
						<text style="margin-right: 10rpx;">预计开始</text>
						<text>{{$u.timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
				</view>
				<view class="info">
					<view class="info-left">
						<image style="
                width: 300rpx;
                height: 400rpx;
                border-bottom-left-radius: 12rpx;
              " :src="item.imageUrl" mode="scaleToFill" />
					</view>
					<view class="info-right">
						<view class="title-text">{{ item.title }}</view>
						<view class="serial-number">{{ item.serialNumber }}</view>
						<view class="time">{{ $u.timeFormat(item.auctionTime, 'yyyy-mm-dd  hh:MM:ss') }}</view>
						<!-- <view class="price">出价{{ item.bidNum }}次</view> -->
						<view class="num">展览品{{ item.auctionNum }}</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 固定按钮 -->
		<Anchor />

		<view style="padding-bottom: 200rpx;"></view>
	</view>
</template>

<script>
import Anchor from "../../components/anchor.vue";
	export default {
		components: {
			Anchor
		},
		data() {
			return {
				scrollTop: 0,
				oldScrollTop: 0,
				load: true,
			};
		},
		props:{
			infoList:{
				type:Array,
				require:false
			}
		},
		created() {
			this.loadding()
		},
		methods: {
			loadding(){
				if(this.infoList.length != 0) {
					this.load = false
				}
			},
			// 云数据库调用
			
			// onSearch() {
			// 	console.log(123);
			// },
			// 跳转进度页
			onTabs(index) {
				uni.navigateTo({
					url: `/pages/progress/progress?index=${index}`,
				})
			},
			// 跳转详情页
			onParticulars(item) {
				uni.navigateTo({
					url: `/pages/particulars/particulars?item=${encodeURIComponent(JSON.stringify((item)))}`,
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.centent {
		.search {
			padding: 20rpx 40rpx;

			.search-son {
				border-radius: 100rpx;
				background-color: #eee;
			}
		}

		.tabs {
			margin: 40rpx 0;
			background-color: #f8f8f8;
			height: 80rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			text {
				color: #333333;
				font-size: 30rpx;
			}
		}

		.title {
			padding: 20rpx 40rpx;
			font-size: 42rpx;
		}

		.info-list {
			height: 100%;

			.list {
				margin-bottom: 40rpx;
				border-radius: 16rpx;
				padding: 0 40rpx;

				.card {
					margin-bottom: -20rpx;
					position: relative;

					.text {
						position: absolute;
						bottom: 30rpx;
						left: 20rpx;
						color: #fff;
					}

					.text-time {
						color: #fff;
						font-size: 24rpx;
						position: absolute;
						top: 30rpx;
						right: 20rpx;
					}
				}

				.info {
					display: flex;
					justify-content: center;
					align-content: center;
					height: 400rpx;

					.info-right {
						padding: 20rpx 20rpx;
						width: 100%;
						height: 400rpx;

						.title-text {
							padding: 20rpx 0;
						}

						.serial-number {
							padding-bottom: 20rpx;
							color: #999;
							font-size: 26rpx;
						}

						.time {
							color: #999;
							font-size: 26rpx;
							padding-bottom: 110rpx;
						}

						.price {
							color: #999;
							font-size: 26rpx;
							// padding-bottom: 110rpx;
						}

						.num {
							display: inline;
							font-size: 26rpx;
							padding: 10rpx;
							color: #999999;
							background-color: #eee;
						}
					}
				}
			}
		}
	}
</style>
